<template>
	<div>
		<el-button
			v-if="
				moduleNameOptions &&
					activePageForm &&
					activePageForm.activeModuleIndex != null &&
					(!moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].maxSize ||
						activePageForm.modules[activePageForm.activeModuleIndex].modules.length <
							moduleNameOptions[activePageForm.modules[activePageForm.activeModuleIndex].type].maxSize)
			"
			type="primary"
			size="small"
			round
			@click="add"
		>
			新增内容
		</el-button>

		<!-- 未配置数据相关内容 -->
		<div v-if="activePageForm.modules[activePageForm.activeModuleIndex].modules.length === 0" class="empty-tips">未配置数据</div>

		<!-- 站内链接 -->
		<template v-else>
			<ul>
				<draggable :list="activePageForm.modules[activePageForm.activeModuleIndex].modules" :options="{ filter: '.undrag' }" @change="moduleDragChange">
					<li v-for="(item, index) in activePageForm.modules[activePageForm.activeModuleIndex].modules" :key="index" class="link-container">
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<div class="flexRBC">
									<div>
										<span v-if="item.title" style="fontWeight: bold; line-height: 32px">{{ index + 1 }}.&nbsp;&nbsp;{{ item.title }}</span>
										<div v-else-if="item.bg" class="flexRSC">
											<span style="fontWeight: bold; line-height: 32px">{{ index + 1 }}.&nbsp;&nbsp;</span>
											<el-image :src="fileBaseUrl + item.bg" class="title-bg" />
										</div>
										<span v-else style="fontWeight: bold; line-height: 32px">{{ index + 1 }}.</span>
									</div>
									<div>
										<el-button size="mini" round type="primary" @click="edit(item, index)">编辑</el-button>
										<el-button size="mini" round type="danger" @click="del(index)">删除</el-button>
										<el-button size="mini" round>拖拽排序</el-button>
									</div>
								</div>
							</div>
							<div class="flexRBC">
								<div v-if="item.pic" class="pic-box"><el-image :src="fileBaseUrl + item.pic" fit="contain" /></div>
								<div class="content-box">
									<div>
										<div v-if="item.title" class="flexRSS cell-item">
											<div class="label">主标题：</div>
											<div claa="value">{{ item.title }}</div>
										</div>
										<div v-if="item.subTitle" class="flexRSS cell-item">
											<div class="label">副标题：</div>
											<div claa="value">{{ item.subTitle }}</div>
										</div>
										<div v-if="item.dump.type" class="flexRSS cell-item">
											<div class="label">跳转类型：</div>
											<div claa="value">{{ dumpTypeOptions[item.dump.type] || '无' }}</div>
										</div>
										<div v-if="item.dump.type" class="flexRSS cell-item">
											<div class="label">跳转链接：</div>
											<div class="value">
												<span v-if="item.dump.type === 'EMPTY'">无</span>
												<span v-if="item.dump.type === 'INSIDE'">{{ item.dump.insideParams.remark || '' }}</span>
												<span v-if="item.dump.type === 'FEATURE' && item.dump.feature === 'CALL'">
													手机功能 > 拨打电话 > {{ item.dump.featureParams.phone }}
												</span>
												<span v-if="item.dump.type === 'FEATURE' && item.dump.feature === 'CONTACT'">手机功能 > 微信客服助手</span>
												<span v-if="item.dump.type === 'WXAPP'">小程序 > {{ item.dump.appId }} > {{ item.dump.path }}</span>
												<span v-if="item.dump.type === 'URL' || item.dump.type === 'URL_KF'">自定义链接 > {{ item.dump.url }}</span>
											</div>
										</div>
									</div>
								</div>
								<!-- <div class="handle-box">
                  <el-button type="primary" size="small" round @click="edit(item, index)">编辑</el-button>
                  <el-button type="danger" size="small" round @click="del(index)">删除</el-button>
                  <el-button v-if="
                      activePageForm.modules[activePageForm.activeModuleIndex]
                        .modules.length > 1
                    " icon="el-icon-sort" size="small" round>拖拽排序</el-button>
                </div> -->
							</div>
						</el-card>
					</li>
				</draggable>
			</ul>
		</template>

		<!-- 组件 -->
		<DialogDump ref="dialogDump" />
    <DialogSmall ref="dialogSmall" />
	</div>
</template>

<script>
import DialogDump from './DialogDump';
import DialogSmall from './DialogSmall.vue'
import wxaBuildConfig from '@/views/wxaBuildModule/config';
import { mapGetters } from 'vuex';
import draggable from 'vuedraggable';

export default {
	components: {
		DialogDump,
		draggable,
    DialogSmall
	},

	data() {
		return {
			// 配置
			dumpTypeOptions: {},
			moduleNameOptions: null,
			// 状态
			// 数据
			classifyCode: 'DEFAULT'
		};
	},
	computed: {
		...mapGetters(['fileBaseUrl', 'activePageForm'])
	},
	watch: {},
	created() {},
	mounted() {
    this.$bus.$on('__SMALL', this.__SMALL)
		this.dumpTypeOptions = wxaBuildConfig[this.classifyCode].dumpType;
		this.moduleNameOptions = wxaBuildConfig[this.classifyCode].moduleName;
		// this.fetchData();
	},
  destroyed() {
    this.$bus.off('__SMALL')
  },
	methods: {
    __SMALL() {
      const dialogSmall = this.$refs.dialogSmall
      let { height }  = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      dialogSmall.open(height).then(res => (this.activePageForm.modules[this.activePageForm.activeModuleIndex].height = res))
    },
		/**
		 * 数据组
		 */
		// 初始化模块数据
		// fetchData() {
		// if (!this.activeModule.hasOwnProperty("form")) {
		//   this.form.type = this.activeModule.key;
		//   this.activeModule.form = this.form;
		// }
		// console.log(this.activeModule);
		// },

		/**
		 * 按钮组
		 */
		// 新增
		add() {
			this.$refs.dialogDump.open({ mode: 'add' }).then(res => {
				console.log('add', res);
				this.activePageForm.modules[this.activePageForm.activeModuleIndex].modules.push(res);
				this.$forceUpdate();
			});
		},

		// 编辑
		edit(item, index) {
			this.$refs.dialogDump.open({ mode: 'edit', row: item }).then(res => {
				this.activePageForm.modules[this.activePageForm.activeModuleIndex].modules[index] = res;
				this.$forceUpdate();
			});
		},

		// 删除
		del(index) {
			this.activePageForm.modules[this.activePageForm.activeModuleIndex].modules.splice(index, 1);
			this.$forceUpdate();
		},

		// 拖拽
		moduleDragChange(val) {
			console.log(val);
			this.$forceUpdate();
		}

		/**
		 * 状态组
		 */

		/**
		 * 方法组
		 */
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 格式化 */
::v-deep {
	.el-card__body {
		padding: 10px;
	}

	.el-card__header {
		padding: 10px 20px;
	}
}

/* 空的 */
.empty-tips {
	margin-top: 100px;
	text-align: center;
	color: #909399;
	font-size: 14px;
}

.link-container {
	margin-top: 10px;
	cursor: move;

	.title-bg {
		width: 188px;
		height: 33px;
	}

	.pic-box {
		margin-right: 10px;
		flex: 0 0 100px;
		height: 100px;
	}

	.content-box {
		flex: 1;
		margin-right: 10px;
		font-size: 14px;

		.cell-item {
			.label {
				flex: 0 0 80px;
				text-align: right;
			}
		}
	}

	.handle-box {
		// flex: 0 0 40px;
		text-align: right;
	}
}
</style>
